<template>
  <div class="max">
    <div class="container">
      <div class="xk-top">
        <!-- 左侧学科 -->
        <div class="top-z">
          <p>学科名称</p>
          <el-input v-model="input"></el-input>
          <el-button>清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>5
        <!-- 右侧学科 -->
        <div class="top-r">
          <el-button type="success" @click="addSub(0, 'add')">
            <i class="el-icon-edit"></i>
            新增学科</el-button>
        </div>
      </div>
      <div class="zb">
        <i class="el-icon-info"></i>
        <p>数据一共 15 条</p>
      </div>

      <!-- 表格 -->
      <el-table :data="subjectsList">
        <el-table-column type="index" width="50" prop="id" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="152">
           <template v-slot="{row}">
          {{ row.addDate | timeFormat }}
        </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template v-slot="{ row }">
            {{ row.isFrontDisplay === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="250">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="$router.push('/subjects/directorys')">学科分类</el-button>
            <el-button size="mini" type="text" @click="$router.push('/subjects/tags')">学科标签</el-button>
            <el-button size="mini" type="text" @click="addSub(row.id, 'edit')">修改</el-button>
            <el-button size="mini" type="text" @click="delRemove(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 新增弹出框 -->
      <addSubjects ref="addSubA" v-if="dialogFormVisible" v-model="dialogFormVisible" @SUB_ADD="subjectsListA" :isAddOrEdit="isAddOrEdit" :id="id"/>
    </div>
  </div>
</template>

<script>
import addSubjects from '../components/subjects-add.vue'
import { subjectsListRequest, remove } from '../../api/hmmm/subjects'
export default {
  components: { addSubjects },
  data () {
    return {
      input: '',
      total: 0,
      page: 1,
      id: 0,
      pagesize: 5,
      addDate: '',
      subjectsList: [],
      subjectName: '',
      isAddOrEdit: 'add',
      dialogFormVisible: false
    }
  },
  created () {
    this.subjectsListA()
  },
  methods: {
    async subjectsListA () {
      const res = await subjectsListRequest({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.subjectName
      })
      console.log(res)
      this.subjectsList = res.data.items
      this.total = res.data.counts
    },
    // 添加
    addSub (id, isAddOrEdit) {
      // console.log(id)
      this.dialogFormVisible = true
      this.isAddOrEdit = isAddOrEdit
      // this.$refs.addSubA.openDialog()
      this.id = id
      this.page = 1
    },
    // 删除
    delRemove (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(id, 'ididid')
        await remove({ id })
        this.subjectsListA()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页功能
    handleSizeChange (value) {
      this.pagesize = value
      this.subjectsListA()
    },
    handleCurrentChange (value) {
      this.page = value
      this.subjectsListA()
    },
    // 头部搜索
    search (value) {
      console.log(value)
    }
    // 清除
    // purge () {
    //   this.$refs.ruleForm.resetFields()
    // }
  }
}
</script>

<style scoped lang='scss'>
.max {
  background: #ffffff;
  .container {
    padding: 20px;
    ::v-deep .cell {
      display: flex;
    }
    .xk-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .top-z {
        display: flex;
        align-items: center;
        margin-left: 10px;
        p {
          width: 56px;
          font-size: 14px;
          margin-right: 10px;
          font-weight: 500;
          color: #606266;
        }
        ::v-deep .el-input--medium {
          width: 180px;
          height: 33px;
          line-height: 33px;
          margin-right: 10px;
        }
      }
    }

    .zb {
      display: flex;
      align-items: center;
      background: #f4f4f6;
      margin-top: 15px;
      margin-bottom: 15px;

      .el-icon-info {
        color: #919498;
        margin: 0 10px 0 20px;
      }
      p {
        color: #93969b;
        font-size: 12px;
      }
    }
    // 分页
    .block {
      text-align: right;
      height: 30px;
      .el-pagination {
        margin-top: 15px;
      }
      ::v-deep .el-pagination__jump {
        margin-left: 0;
      }
    }
  }
}
</style>
